<!-- 绩效-基础设置-否决指标库 -->
<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew
        :title="title"
        :breadCrumb="breadCrumb"
        showBack
      ></pageHeaderNew>
    </template>
    <ConditionBox :margin-bottom="20">
      <template #left>
        <a-input-search
          :style="{ width: '220px' }"
          placeholder="名称"
          search-button
          @search="refresh"
          @press-enter="refresh"
          v-model="vetolIndexParams.name"
        />
      </template>
      <template #right>
        <a-button type="primary" @click="add(null)">新增指标</a-button>
      </template>
    </ConditionBox>
    <table-turn :table-data="getTableData" ref="tableRef">
      <a-table-column :width="70">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column :width="200" data-index="name" title="指标名称">
      </a-table-column>
      <a-table-column :width="200" data-index="definition" title="指标定义">
      </a-table-column>
      <a-table-column :width="200" data-index="define" title="项目界定">
      </a-table-column>
      <a-table-column :width="200" data-index="rule" title="评分标准/准则">
      </a-table-column>
      <a-table-column
        :width="200"
        data-index="assessmentTargetValue"
        title="考核目标值"
      >
        <template #cell="{ record }">
          {{
            record.assessmentTargetValue
              ? `${record.assessmentTargetValue}${record.assessmentTargetUnit}`
              : '--'
          }}
        </template>
      </a-table-column>
      <a-table-column :width="200" data-index="scoreType" title="评分方式">
        <template #cell="{ record }">
          <span v-if="record.scoreType">
            {{ record.scoreType === 1 ? '选项否决' : '输入扣分' }}
          </span>
          <span v-else> -- </span>
        </template>
      </a-table-column>
      <a-table-column
        :width="80"
        align="center"
        data-index="status"
        title="启用状态"
      >
        <template #cell="{ record }">
          <a-switch
            v-model="record.status"
            :checked-value="1"
            :unchecked-value="2"
            @change="stateChange(record)"
          ></a-switch>
        </template>
      </a-table-column>
      <a-table-column
        :width="120"
        data-index=""
        title="操作"
        fixed="right"
        align="center"
      >
        <template #cell="{ record }">
          <a-tooltip content="编辑">
            <IconFont
              type="icon-edit"
              :size="26"
              :style="{
                marginRight: '10px',
                cursor: 'pointer'
              }"
              @click="goEdit(record)"
            />
          </a-tooltip>
          <a-tooltip content="删除" position="left">
            <a-popconfirm content="是否确认删除该条数据?" @ok="del(record.id)">
              <icon-font
                type="icon-delete"
                :size="26"
                :style="{
                  cursor: 'pointer',
                  marginRight: '10px'
                }"
              />
            </a-popconfirm>
          </a-tooltip>
        </template>
      </a-table-column>
    </table-turn>
  </ContentCard>
  <AddIndex
    v-model:visible="modalVisible"
    @extraIndexEmit="indexEmit"
    :data="currData"
  ></AddIndex>
</template>

<script lang="ts" setup>
import AddIndex from './ExtraDrawer.vue';
import {
  GetVetolIndexList,
  PostVetolIndex,
  PutVetolIndex,
  DelVetolIndex
} from '@/apis/management/performance/baseSetting/template';
import { VetoIndex } from '@/apis/management/performance/baseSetting/template/type';
import { Message } from '@arco-design/web-vue';

const router = useRouter();
const title = '否决指标库';

const breadCrumb: string[] = ['人事', '基础设置', '指标库', '否决指标库'];

let modalVisible = ref(false); // 判断新增弹出框是否打开
let currData = ref(); // 储存当前选中数据
let tableRef = ref();

// 新增
const add = (record: any) => {
  currData.value = { status: 1, scoreType: 1 };

  modalVisible.value = true;
};
const vetolIndexParams = reactive<{ name?: string }>({ name: void 0 });
// 获取表格数据
const getTableData = async (pagination: any) => {
  try {
    const res = await GetVetolIndexList({ ...vetolIndexParams, ...pagination });
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};

// 编辑
const goEdit = (record: any) => {
  currData.value = record;
  modalVisible.value = true;
};

// 删除某一行
const del = async (id: number) => {
  try {
    await DelVetolIndex({ ids: [id] });
    refresh();
  } catch (error: unknown) {
    console.log(error);
  }
};

// 弹窗自定义事件
const indexEmit = async (data: VetoIndex) => {
  if (data.id) {
    await PutVetolIndex(data);
  } else {
    await PostVetolIndex(data);
  }
  refresh();
};

// 刷新表格数据
const refresh = () => {
  tableRef.value.loadData();
};
const stateChange = async (data: VetoIndex) => {
  await PutVetolIndex(data);
  Message.success('修改成功');
};
</script>

<style scoped lang="less">
.wrap {
  padding: 20px;

  .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
}
</style>
